<script lang="ts" setup>
  import { ref } from 'vue';
  import Pagination from '@sscd/pagination';
  const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
  const current = ref(1);
  const pageSize = ref(10);
  const total = ref(50);
  const onShowSizeChange = (curr: number, page: number) => {
    pageSize.value = page;
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">自定义下拉选项</div>
    <div class="demo-content">
      <Pagination
        v-model:current="current"
        v-model:page-size="pageSize"
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        @show-size-change="onShowSizeChange"
      >
        <template #buildOptionText="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-else>全部</span>
        </template>
      </Pagination>
    </div>
  </div>
</template>
